<!--
* @author wn
* @date 2022/05/11 11:26:54
* @description:  二级路由--分类
!-->
<template>
	<div class="category-page">
		<div class="container">
			<!-- 面包屑 to="/"-->
			<xtx-bread>
				<xtx-bread-item :to="{ path: '/' }">首页</xtx-bread-item>
				<!-- 动画模式：旧元素先离场，新元素再入场
             :key 值不同，节点就会重新创建，触发动画效果
				-->
				<transition name="fade-right" mode="out-in">
					<xtx-bread-item :key="category.id">
						{{ category.name }}
					</xtx-bread-item>
				</transition>
			</xtx-bread>
			<!-- 轮播图 -->
			<div class="carousel">
				<xtx-carousel :sliders="sliders" autoPlay />
			</div>
			<!-- 所有二级分类 -->
			<div class="sub-list">
				<h3>全部分类</h3>
				<ul>
					<li v-for="sub in category.children" :key="sub.id">
						<router-link :to="`/category/sub/${sub.id}`">
							<img v-lazy="sub.picture" alt="" />
							<p>{{ sub.name }}</p>
						</router-link>
					</li>
				</ul>
			</div>
			<!-- 其他子分类 -->
			<div class="sub-goods" v-for="item in subList" :key="item.id">
				<div class="head">
					<h3>- {{ item.name }} -</h3>
					<p>温暖柔软，品质之选</p>
					<XtxMore />
				</div>
				<div class="good">
					<good-item v-for="good in item.goods" :key="good.id" :good="good" />
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { findBanner } from '@/network/home'
import { findTopCategory } from '@/network/category'
import GoodItem from '@/views/category/components/GoodItem'
export default {
	name: 'CategoryPage',
	components: { GoodItem },
	setup() {
		// 获取面包屑数据  根据 id 找到item.name
		const route = useRoute()
		// 从 Vuex - 中获取顶级分类数据获取
		const store = useStore()
		const category = computed(
			// 短路运算防止在模板中使用报错(因为分类是需要请求)
			() => store.state.category.list.find(v => v.id === route.params.id) || {}
		)
		// 轮播图数据
		const sliders = ref([])
		findBanner().then(v => (sliders.value = v.result))
		// 二级分类子商品数据
		const subList = ref([])
		const getSubList = () =>
			findTopCategory(route.params.id).then(
				v => (subList.value = v.result.children)
			)
		watch(
			() => route.params.id,
			// id变化了 重新请求二级分类数据
			// setup只会初始化执行一次  这里 执行 初始化就不会执行 所以 immediate
			// /category/sub/id 公用一个路由 这里会拿到 sub/id 只需要 category/id
			newValue => {
				if (newValue && `/category/${newValue}` === route.path) getSubList()
			},
			{ immediate: true }
		)
		return { category, sliders, subList }
	},
}
</script>
<style scoped lang="less">
.carousel {
	height: 500px;
}
h3 {
	font-size: 28px;
	color: #666;
	font-weight: normal;
	text-align: center;
	line-height: 100px;
	text-align: center;
}
.sub-list {
	margin-top: 20px;
	background-color: #fff;
	ul {
		display: flex;
		padding: 0 32px;
		flex-wrap: wrap;
		li {
			width: 168px;
			height: 160px;
			a {
				display: flex;
				flex-direction: column;
				align-items: center;
				img {
					width: 100px;
					height: 100px;
				}
				p {
					line-height: 40px;
				}
				&:hover {
					color: @xtxColor;
				}
			}
		}
	}
}
// 其他分类
.sub-goods {
	background-color: #fff;
	margin-top: 20px;
	position: relative;
	.head {
		.xtx-more {
			position: absolute;
			top: 20px;
			right: 20px;
		}
		p {
			// 无论是否进行移动，其所占的位置仍然留有空位，
			// 后面的无定位块元素不会移动上来
			position: relative;
			top: -20px;
			text-align: center;
			color: #999;
			font-size: 20px;
		}
	}
	.good {
		display: flex;
		flex-wrap: wrap;
		padding: 0 65px 30px;
	}
}
// 面包屑  淡入 淡出 动画
</style>
